<template>
    <div class="process1">
        <router-link to="/big"> <img src="@/static/leftbtn.jpg" class="return" alt=""></router-link>
        <div class="body">
            <div class="leftbtn">
                <img src="@/static/leftbtn.jpg" alt="">
            </div>
            <div class="main">
                <processdetail1 v-if="step == 1 && topics[nowtopic]" @end="end"
                    :mymp3="`${config.imgTarget}/music/${topics[nowtopic].musicPath}`">
                </processdetail1>
                <gonggu v-if="step == 2 && topics[nowtopic]" @correct="getcorrect" @end="end"
                :id="`${topics[nowtopic].id}`"
                    :mymp3="`${config.voiceTarget}/sounds/小朋友，请问她感觉怎么样.mp3`" :level="topics[nowtopic].levelId"
                    :mypic="`${config.imgTarget}/${topics[nowtopic].levelId}/${topics[nowtopic].path}`">
                </gonggu>
                <processwawrd @click="restart" v-if="step == 4"></processwawrd>
                <processerror @click="restart" v-if="step == 5"></processerror>

            </div>

            <div class="leftbtn" @click="leftbtn">
                <img src="@/static/rightbtn.jpg" alt="">
            </div>
        </div>
    </div>
</template>

<script setup>
import config from '../../config/config.js'
import processdetail1 from '@/components/processdetail1.vue';
import gonggu from '@/components/gonggudetail.vue';
import processwawrd from '@/components/processaward.vue'
import processerror from '@/components/processerror.vue'
import api from '@/api/user'
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import { message } from 'ant-design-vue';
import { useAuthStore } from '../../store/index';
const store = useAuthStore();
const route = useRoute();
const router = useRouter();
const topics = ref([]);
const nowtopic = ref(0);
//本体进度
const step = ref(1);
//获取题目
const topicorrect = ref(0);
const end = () => {
    if (step.value == 1) {
        step.value++;
    } else if (step.value == 2) {
        if (!topicorrect.value) {
            step.value = 5;
        } else {
            step.value = 4;
        }
    }


}
const restart = async () => {

    nowtopic.value++;
    console.log(3);
    if (nowtopic.value >= topics.value.length) {
        message.success({ content: '恭喜你完成了全部学习', duration: 2 });

        await endstudy();



    } else {
        step.value = 1;
    }
}
const endstudy = async () => {
    try {
        return new Promise((reslove) => {
            api.putprocess({
                "remainingLevels": 2
            }).then((res) => {
                console.log(res);
                setTimeout(() => {
                    router.push({
                        name: "smallcontroller",
                        query: {
                            number: route.query.processnum % 8 != 0 ? Math.floor(route.query.processnum / 8) : route.query.processnum / 8 - 1
                        }
                    })
                }, 2000);
                reslove(1);
            })
        })
    } catch (error) {

    }

}
const leftbtn = () => {
}
const getcorrect = (x) => {
    topicorrect.value = x;
    console.log(topicorrect.value);
}
onMounted(() => {
    step.value = 1;

    gettopics();
})
const gettopics = () => {
    let topicnum = [];
    api.getconsolidate({
        level: route.query.processnum
    })
        .then((res) => {
            console.log(res);
            topicnum = res.data
            getonetopic(topicnum)
        })
}
const getonetopic = async (x) => {
    for (const element of x) {
        try {
            const res = await api.getonebank(element);
            res.data.id=element;
            topics.value.push(res.data);
            console.log(res);
        } catch (error) {
            console.error('Error fetching data for element:', element, error);
        }
    }
    console.log(topics.value[nowtopic.value]);
};
</script>

<style lang="scss" scoped>
.process1 {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('@/static/processback.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    .return {
        position: absolute;
        left: 3rem;
        top: 3rem;
        height: 4rem;
    }

    .body {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10rem;
    }

    .main {}
}
</style>
